<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script src="../../../jquery.gamequery.js"></script>
        <script>
            $(function(){
                var animation = new $.gameQuery.Animation({imageURL: "sh.png", type: $.gameQuery.ANIMATION_HORIZONTAL, numberOfFrame: 4, delta: 32, rate: 300});
                
                $("#playground").playground({height: 64, width: 350});
                
                $.playground()
                    .addSprite("aRotateScale",{animation: animation, posx: 16, posy: 16})
                    .addSprite("scaleARotate",{animation: animation, posx: 80, posy: 16})
                    .addSprite("rotateAScale",{animation: animation, posx: 180, posy: 16})
                    .addSprite("aScaleRotate",{animation: animation, posx: 240, posy: 16})
                
                var angle = 45;
                $.playground().registerCallback(function(){
                        $("#aRotateScale").rotate(angle).scale(2);
                        $("#scaleARotate").scale(2).rotate(-angle);
                        $("#rotateAScale").rotate(45).scale(Math.cos(angle/360*Math.PI*2)*2);
                        $("#aScaleRotate").scale(-Math.cos(angle/360*Math.PI*2)*2).rotate(45);
                        angle -= 1;
                        angle %= 360;
                    }, 30);
                
                $.playground().startGame();
            });
        </script>
    </head>
    <body>
        <h2>Animated rotation (CCW, CW), 2x scale (two sprites); 45deg rotation, Animated scale (two sprites out-of-phase):</h2>
        <div id="playground" style="width: 350px; height: 50px; background: white"></div>
    </body>
</html>